<template>
  <div class="ticket-tabbar">
    <div class="ticket-tabbar-box">
      <div class="wrap">
        <div
          class="item"
          :class="{ active: currentTab == index }"
          v-for="(item, index) in tabList"
          @click="tabChange(index)"
        >
          <div class="button">{{ item.label }}</div>
          <div class="line" v-if="index < tabList.length - 1">/</div>
        </div>
      </div>
    </div>
    <div style="height: 64rpx"></div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  watch,
  computed,
  defineProps,
  defineEmits
} from 'vue'
import Index from '../../pages/index/index.vue'

const props = defineProps({
  tabList: {
    type: Array,
    default: []
  },
  currentTab: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['change'])
const tabChange = (index: number) => {
  emit('change', index)
}
</script>

<style lang="scss">
.ticket-tabbar {
  .ticket-tabbar-box {
    position: fixed;
    left: 0;
    width: 100%;
    background: #ececec;
    z-index: 100;
    .wrap {
      display: flex;
      align-items: center;
      padding-top: 20rpx;
      .item {
        display: flex;
        align-items: center;
        color: #000;
        font-family: Helvetica;
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44rpx;
        .button {
          margin-right: 10rpx;
        }
        .line {
          margin-right: 10rpx;
        }
      }
      .item.active {
        .button {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
